<template>
	<view class="page">
		<view class="top" v-if="show">
		</view>
		<view class="content">
			<view class="title">账户设置</view>
			<view class="tip">设置你的账户密码，并填写邀请码</view>
			<view class="inputBox">
				<view class="passdword">
					<input v-model="passdword" :password="pwd" placeholder="请输入6-12位由字母和数字组成的密码" />
					<image @click="changePwd" v-show="!pwd" src="../../static/icon/icon_pwd_open@3x.png"></image>
					<image @click="changePwd" v-show="pwd" src="../../static/icon/icon_pwd_close@3x.png"></image>
				</view>
				<view class="passdword">
					<input v-model="passdword2" :password="pwd2" placeholder="请输入再次输入密码" />
					<image @click="changePwd3" v-show="!pwd2" src="../../static/icon/icon_pwd_open@3x.png"></image>
					<image @click="changePwd3" v-show="pwd2" src="../../static/icon/icon_pwd_close@3x.png"></image>
				</view>
				<view class="passdword">
					<input v-model="numPassdword" :password="numpwd" placeholder="请输入6位数字交易密码" />
					<image @click="changePwd2" v-show="!numpwd" src="../../static/icon/icon_pwd_open@3x.png"></image>
					<image @click="changePwd2" v-show="numpwd" src="../../static/icon/icon_pwd_close@3x.png"></image>
				</view>
				<view class="invativeCode">
					<input v-model="invative" placeholder="邀请码 (非必填)" />
				</view>
			</view>
			<button :loading="loading" :disabled="loading" class="btn" @click="confirm">完成注册</button>
		</view>
	</view>
</template>

<script>
	import{register} from'../../api/login/index'
	export default{
		data() {
			return {
				pwd:true,
				pwd2:true,
				numpwd:true,
				show: false,
				loading:false,
				phone:"",
				passdword:"",
				passdword2:"",
				numPassdword:"",
				invative:"",
				code:"",
				numberRege:/^\d{6}$/,
				passwordRege:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
			}
		},
		onLoad(e) {
			if(e.phone){
				this.phone = e.phone
			}
			if(e.code){
				this.code = e.code
			}
			// #ifdef H5
			this.show = true
			// #endif
			console.log(this.code)
		},
		methods:{
			changePwd(){
				this.pwd = !this.pwd
			},
			changePwd2(){
				this.numpwd = !this.numpwd
			},
			changePwd3(){
				this.pwd2 = !this.pwd2
			},
			confirm(){
				if(this.passdword == ''){
					this.$tools.toast('密码不能为空')
					return
				}
				if(!this.passwordRege.test(this.passdword)){
					this.$tools.toast('密码必须为6-12位，由数字和字母组成')
					return
				}
				if(this.passdword != this.passdword2){
					this.$tools.toast('两次输入的密码不一致')
					return
				}
				if(this.numPassdword == ''){
					this.$tools.toast('交易密码不能为空')
					return
				}
				if(!this.numberRege.test(this.numPassdword)){
					this.$tools.toast('交易密码必须为6位数字')
					return
				}
				this.loading = true
				register({zone:"86",
				phone:this.phone,
				pwd:this.passdword,
				tradePwd:this.numPassdword,
				parentInviteCode:this.invative,
				code:this.code}).then(res=>{
					console.log(res)
					this.loading = false
					this.$tools.toast("注册成功")
					setTimeout(function(){
						uni.navigateBack({
							delta:3
						})
					},1000)
				}).catch(err=>{
					console.log(err)
					this.loading = false
				
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		z-index: 99;
	}
	.top {
		height: 50px;
	}
	.content {
		margin-top: 30rpx;
		padding: 0 60rpx;
		.title {
				font-size: 40rpx;
				font-weight: 700;
		}

		.tip {
			margin-top: 30rpx;
			font-size: 30rpx;
		}
		input{
			font-size: 27rpx!important;
			padding: 0!important;
		}
		.inputBox{
			margin-top: 80rpx;
			.phonetip{
				font-size: 21rpx;
				color: #808080;
			}
			.invativeCode{
				margin-top: 30rpx;
				padding: 30rpx 0;
				border-bottom:0.5px solid $uni-border-color;
				display: flex;
				align-items: center;
				input{
					flex: auto;
					padding: 5rpx;
				}
				}
			.passdword{
				margin-top: 30rpx;
				padding: 30rpx 0;
				border-bottom:0.5px solid $uni-border-color;
				display: flex;
				align-items: center;
				input{
					flex: auto;
					padding: 5rpx;
				}
				image{
					flex: none;
					width: 40rpx;
					height: 40rpx;
				}
			}
			}
			   .btn{
				  background: $uni-bg-color;
				  color: #FFFFFF;
				   margin-top: 60rpx;
				   height: 90rpx;
				   line-height: 90rpx;
			   }
	}
</style>
